<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'core.login.help' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="close()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ng-container *ngFor="let question of questions">
            <ion-item button class="ion-text-wrap divider" (click)="toggle(question)" [attr.aria-expanded]="isOpen(question)"
                [attr.aria-controls]="'question-' + question.id + '-answer'" role="heading" [detail]="false">
                <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                    [class.expandable-status-icon-expanded]="isOpen(question)" />
                <ion-label>
                    <h2>{{ question.text }}</h2>
                </ion-label>
            </ion-item>
            <ion-item [id]="'question-' + question.id + '-answer'"
                [class]="question.answer.class + ' ion-text-wrap core-login-site-help--answer'" [class.open]="isOpen(question)"
                [tabindex]="isOpen(question) ? null : -1" [attr.inert]="isOpen(question) ? null : 'true'">
                <ion-label>
                    <p *ngIf="question.answer.format === 'text'">{{ question.answer.text }}</p>
                    <p *ngIf="question.answer.format === 'safe-html'" [innerHTML]="question.answer.text"></p>
                    <core-format-text *ngIf="question.answer.format === 'unsafe-html'" [text]="question.answer.text" [filter]="false" />
                </ion-label>
            </ion-item>
        </ng-container>
        <ion-item>
            <ion-label>
                <p [innerHTML]="'core.login.faqmore' | translate"></p>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>
